<template>
  <el-container>
    <div style="padding: 10px;padding-bottom: 0">
      <div class="report_header" ref="headerHeight">
        <div style="display: flex;align-items: center">
          <div class="report_header_left"></div>
          <div style="width: 800px;display: flex;align-items: center;">
            <div class="report_header_date">
              <el-date-picker
                style="width: 100%"
                v-model="query.date"
                value-format="yyyy-MM-dd"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>

            <div class="report_header_query" style="">
              <queryShop @queryShopClick='queryShopClick'></queryShop>
            </div>

            <div class="report_header_query" style="width:100px;">
              <el-select v-model="query.emoloyeeId" clearable placeholder="送货员" @change="deliveryaaa"
                         filterable @focus="getEmployeeList('')" :filter-method="queryEmployee" style="width: 100%">
                <el-option v-for="item in emoloyee" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </div>

            <div class="report_header_query">
              <el-select v-model="memberName" value-key="id" clearable placeholder="请选择客户"
                         filterable @focus="getMemberList('')" @change="selectMember" :filter-method="queryMember">
                <el-option v-for="item in members" style="width: 600px;" :key="item.id" :label="item.name"
                           :value="item">
                  <div style="display: flex">
                    <span style="width: 60px;">{{ item.code }}</span>
                    <span style="float: left;width: 100px;overflow: hidden;text-overflow: ellipsis;">{{
                        item.name
                      }}</span>
                    <span style="float: right; color: #8492a6; font-size: 8px;width: 80px;margin-left: 10px">{{
                        item.mobile
                      }}</span>
                    <div style="width: 200px;">
                      <span style="color: #8492a6; font-size: 8px;">{{ item.address }}</span>
                    </div>
                  </div>
                </el-option>
                <div style="display: flex;width: 100%;position: absolute;bottom: 0">
                  <div style="width: 50%;background-color: rgb(248,248,248);"></div>
                  <div class="elOption" @click="toSearchMember">搜索客户</div>
                </div>
                <div style="height: 30px"></div>
              </el-select>
            </div>
          </div>

          <div class="report_header_query">
            <el-select v-model="supplierName" @change="changeSupp" placeholder="供应商" value-key="id" clearable
                       filterable :filter-method="remoteMethod" style="width:150px">
              <el-option v-for="(item,index) in suppliers" style="width: 600px" :label="item.name" :value="item"
                         :key="item.id">
                <div style="display: flex">
                  <span style="float: left;width: 80px;overflow: hidden;text-overflow: ellipsis;">{{ item.name }}</span>
                  <span style="width: 100px;overflow: hidden;text-overflow: ellipsis;">{{ item.phone }}</span>
                  <div style="width: 200px;">
                    <span style="color: #8492a6; font-size: 8px;">{{ item.areaName }}{{ item.address }}</span>
                  </div>
                </div>
              </el-option>
              <div style="display: flex;width: 100%;position: absolute;bottom: 0">
                <div style="width: 50%;background-color: rgb(248,248,248);"></div>
                <div class="elOption" @click="toSearchSupplier">搜索供应商</div>
              </div>
              <div style="height: 30px"></div>
            </el-select>
          </div>

          <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
            <div
              style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px;justify-content: flex-end;">
              <div class="report_header_query">
                <el-input style="width: 100%" prefix-icon="el-icon-search" placeholder="客户编号/订单号" v-model="allKeyword"
                          clearable></el-input>
              </div>
            </div>
             <el-button style="margin-left: 10px;height: 32px;margin-top: 7px;border-top-left-radius: 4px !important;border-right: 1px solid rgb(102, 177, 255);
                border-bottom-left-radius: 4px !important;border-top-right-radius: 4px !important;border-bottom-right-radius: 4px !important;" size="small" type="primary"
                       @click="queryClick">查询
            </el-button>
            <!--<div @click="chooseClick"-->
                 <!--style="width: 25px;height: 32px;background-color: #1890ff;margin-top: 7px;display: flex;justify-content: center;-->
                   <!--border-top-left-radius: 0px !important;-->
                <!--border-bottom-left-radius: 0px !important;border-top-right-radius: 4px !important;border-bottom-right-radius: 4px !important;align-items: center;">-->
              <!--<i style="font-size: 15px;color: white;"-->
                 <!--:class="[queryType == false?'el-icon-arrow-down':'el-icon-arrow-up']"></i>-->
            <!--</div>-->

            <el-dropdown trigger="click" @command="handleCommand">
              <el-button style="margin-left: 10px;margin-top: 7px;" size="small" type="warn">
                批量操作<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <!--<el-dropdown-item v-permission="['shipping.shipped']" command="shipped">批量核销</el-dropdown-item>-->
                <el-dropdown-item v-permission="['shipping.import']" command="import">套餐导入</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div style="width: 800px;display: flex;align-items: center;" v-show="queryType == true">
          <!--          这是放隐藏条件的容器-->
          <!--<div class="report_header_date">-->
            <!--<el-select v-model="productName" clearable placeholder="请选择商品"-->
                       <!--filterable @focus="getProductList" value-key="id" :filter-method="queryProduct"-->
                       <!--@change="changeProduct" style="width: 100%">-->
              <!--<el-option v-for="item in productOptions" :key="item.id" :label="item.name" style="width:650px"-->
                         <!--:value="item">-->
                <!--<div style="display: flex">-->
                  <!--<span style="width: 80px;overflow: hidden;text-overflow: ellipsis;">{{ item.sn }}</span>-->
                  <!--<span style="float: left;width: 160px;overflow: hidden;text-overflow: ellipsis;margin-left: 10px">{{-->
                      <!--item.name-->
                    <!--}}</span>-->
                  <!--<div style="width: 200px;">-->
                    <!--<span style="color: #8492a6; font-size: 8px;">{{ item.spec1 }}</span>-->
                  <!--</div>-->
                <!--</div>-->
              <!--</el-option>-->
              <!--<div style="display: flex;width: 100%;position: absolute;bottom: 0">-->
                <!--<div style="width: 50%;background-color: rgb(248,248,248);"></div>-->
                <!--<div class="elOption" @click="toAddProduct">搜索商品</div>-->
              <!--</div>-->
              <!--<div style="height: 30px"></div>-->
            <!--</el-select>-->
          <!--</div>-->

          <!--<div class="report_header_query">-->
            <!--<el-input style="width: 100%" prefix-icon="el-icon-search" placeholder="请输入订单号" v-model="query.orderSn"-->
                      <!--clearable></el-input>-->
          <!--</div>-->
        </div>
      </div>
    </div>
    <div class="pd10">
      <el-tabs type="border-card" @tab-click="tabsClick" style="postion:relative" :style="{height:curHeight+'px'}">
        <el-tab-pane label="全部订单">
          <div class="details_card" v-loadMore="[payLoads,'shipping-list0']" :style="{height:tabsHeight+'px'}">
            <shippingList :shippingForm="shippingForm" @detailsClick="detailsClick"></shippingList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待派单">
          <span slot="label">
          <span class="span-box">
            <span>待派单</span>
              <span class="btn-bell-badge" v-if="Tobeshipped>0">
                <span class="num">{{Tobeshipped}}</span>
              </span>
          </span>
        </span>
          <div class="details_card" v-loadMore="[payLoads,'shipping-list1']" :style="{height:tabsHeight+'px'}">
            <shippingList shippingType="待发货" :shippingForm="shippingForm" @detailsClick="detailsClick"></shippingList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="配送中">
            <span slot="label">
          <span class="span-box">
            <span>待配送</span>
              <span class="btn-bell-badge" v-if="Tobedelivered>0">
                <span class="num">{{Tobedelivered}}</span>
              </span>
          </span>
        </span>
          <div class="details_card" v-loadMore="[payLoads,'shipping-list2']" :style="{height:tabsHeight+'px'}">
            <shippingList shippingType="配送中" :shippingForm="shippingForm" @detailsClick="detailsClick"></shippingList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待核销">
          <span slot="label">
          <span class="span-box">
            <span>待核销</span>
              <span class="btn-bell-badge" v-if="Tobeshippedhexiao>0">
                <span class="num">{{Tobeshippedhexiao}}</span>
              </span>
          </span>
        </span>
          <div class="details_card" v-loadMore="[payLoads,'shipping-list3']" :style="{height:tabsHeight+'px'}"  >
            <shippingList shippingType="待核销" :shippingForm="shippingForm" @detailsClick="detailsClick"></shippingList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已完成">
          <div class="details_card" v-loadMore="[payLoads,'shipping-list4']" :style="{height:tabsHeight+'px'}">
            <shippingList shippingType="已完成" :shippingForm="shippingForm" @detailsClick="detailsClick"></shippingList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已取消">
          <div class="details_card" v-loadMore="[payLoads,'shipping-list5']" :style="{height:tabsHeight+'px'}">
            <shippingList shippingType="已取消" :shippingForm="shippingForm" @detailsClick="detailsClick"></shippingList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已退货">
          <div class="details_card" v-loadMore="[payLoads,'shipping-list6']" :style="{height:tabsHeight+'px'}">
            <returnslist :returnsForm="returnsForm" @detailsClick="detailsClickone"></returnslist>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-footer class="el-footerBox">
      <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                  @pagination="totalOrder" style="margin-bottom: auto"></pagination>
    </el-footer>
    <div  style="padding-left:20px;padding-right:20px" v-if="obtain==true && scopeType == 3">
      <div>
  <div class="app"  v-if="deliveryForm!=null" >
       <div class="deliveryboy">
           <span >总计:</span>
      </div>
      <div class="content">

        <div class="content_one">
          <span>收款金额：{{ delivery(deliveryForm.paymentAmt)}}</span>
          <span>退款金额：{{ delivery(deliveryForm.refundsAmt)}}</span>
        </div>
        <div class="content_one">
          <span>压桶数:{{deliveryForm.plegeQry}}</span>
          <span>退桶数:{{deliveryForm.returnQry}}</span>
        </div>
        <div class="content_one">
          <span>压桶金额:{{delivery(deliveryForm.plegeAmt)}}</span>
          <span>退桶金额:{{delivery(deliveryForm.returnAmt)}}</span>
        </div>
        <div class="content_one">
          <span>客户欠桶:{{deliveryForm.oweQry}}</span>
          <span>客户存桶:{{deliveryForm.storeQry}}</span>
        </div>
        <div class="content_one">
          <span>送货数量:{{deliveryForm.outQry?deliveryForm.outQry:0}}</span>
          <span>回桶数量:{{deliveryForm.bckQry}}</span>
        </div>
      </div>
      <div class="summary">
        <div style="display:flex;padding-left:20px">
           <div style="margin-right:10px">
             <span >实收金额:</span>
              <span  style="color:red">{{delivery(deliveryForm.effectiveAmt)}}</span>
          </div>
           <div>
             <span >实收水票:</span>
              <span style="color:red">{{delivery(deliveryForm.paymentQry)}}</span>
          </div>
        </div>

        <div>
          <el-button type="warning" @click="writeoff" style="margin-left:20px">一键核销</el-button>

        </div>
      </div>
  </div>
  </div>
    </div>
    <upload-excel-component ref="upload" :on-success="handleSuccess" :before-upload="beforeUpload"/>
    <el-dialog
      title="导入"
      :visible.sync="daoruType"
      width="20%"
      v-el-drag-dialog
      append-to-body
      :before-close="daoruClose">
      <div
        style="position: relative;height: 10vh;overflow: auto;display: flex;flex-direction: column;align-items: center">
        <span>{{ firstSheetName }}</span>
        <span>共计{{ daoruData.length }}条数据</span>
        <el-button type="info" style="margin-top: 20px" @click="batchShippingClick">确认导入</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="双击选择客户"
      :visible.sync="memberTableVisible"
      width="950px"
      v-el-drag-dialog
      append-to-body
      :before-close="memberTableClose">
      <div style="position: relative;">
        <member-table :key="times" @memberDouble="memberDouble" @memberTableClose="memberTableClose"></member-table>
      </div>
    </el-dialog>
    <el-dialog
      title="查找商品"
      :visible.sync="orderVisible"
      width="950px"
      v-el-drag-dialog
      :before-close="orderClose">
      <div style="position: relative;">
        <productTable ref="productList" @doubleClick="doubleClick" @addClick="addProductClick"></productTable>
      </div>
    </el-dialog>
    <el-dialog
      title="查找供应商"
      :visible.sync="supplierVisible"
      width="950px"
      v-el-drag-dialog
      append-to-body
      :before-close="supplierClose">
      <div style="position: relative;height: 63vh;overflow: auto">
        <supplierTable :key="times" @doubleSupplier="doubleSupplier"></supplierTable>
      </div>
    </el-dialog>
  </el-container>
</template>
<script>
import { list as supplierList } from '@/api/supplier'
import permission from '@/directive/permission/index.js' // 权限判断指令
import memberTable from '@/components/MemberTable/index'
import productTable from '@/components/ProductList/productList'
import supplierTable from '../../components/SupplierTable/supplierList'
import loadMore from '@/utils/more.js'
import { EventBus } from '@/api/eventBus'
import shippingList from './components/list'
import { list, exportList, batchShipping, count} from '@/api/shipping'
import { list as memberList } from '@/api/member'
import Pagination from '@/components/Pagination'
import utils from '../../utils/utils.js'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import ExportList2Excel from '@/components/ExportList2Excel'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import { list as productList } from '@/api/product'
import { list as emoloyeeList } from '@/api/sysEmployee'
import { getInfo, list as sysMchList } from '@/api/sysMch'
import { deliveryshippingList,summary } from '@/api/shippingSettle'
import deliverylist from './components/deliverylist'
import returnslist from '../returns/components/list'
import { list as returnlist} from '@/api/return'
import {completeBatch} from '@/api/shippingSettle'
import { mapGetters } from 'vuex'
import queryShop from '@/components/Query/queryShop'
import { list as orderList,count as ordercountclick} from '@/api/order'

export default {
  name: 'shipping-tc-list',
  directives: { elDragDialog, loadMore, permission },
  activated() {
    this.payLoads = new Date().getTime()
  },
  data() {
    return {
      Tobedelivered:0,
      Tobeshipped:0,
      Tobeshippedhexiao:0,
      pagenum:'',
      returnsForm:[],
      obtain:false,
      totalsong:false,
      deliveryForm:null,
      shippingForm: [],
      productName: '',
      suppliers: [],
      supplierName: '',
      payLoads: '',
      orderVisible: false,
      memberName: '',
      shippingStatus: '',
      visible: false,
      allKeyword:'',
      pageNum: 1,
      pageSize: 20,
      total: 0,
      memberTableVisible: false,
      members: [],
      supplierVisible: false,
      times: '',
      emoloyee: [],
      curHeight: null,
      tabsHeight: null,
      mchIdOptions: [],
      mchType: '',
      queryType: false,
      query: {
        date: [],
        sn: '',
        memberId: '',
        orderSn: '',
        phone: '',
        productId: '',
        supplierId: '',
        emoloyeeId: '',
        shopId:''
      },
      completeEmployeeId:'',
      completeMemberId:'',
      completeStartDate:'',
      completeEndDate:'',
      completeProductId:'',
      keyword: {
        date: [],
        sn: '',
        memberId: '',
        orderSn: '',
        phone: '',
        productId: '',
        supplierId: '',
        emoloyeeId: '',
        shopId:''
      },
      pickerOptions: {//时间快捷选择
        shortcuts: [{
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      daoruType: false,
      daoruData: [],
      productOptions: [],
      firstSheetName: '',

    }
  },
  components: {
    returnslist,deliverylist,shippingList, Pagination, UploadExcelComponent, ExportList2Excel, memberTable, productTable, supplierTable,queryShop

  },
  created() {
    var _this = this
    this.loadOrder()
    this.loadSupplier('')
    this.refreshHit();

    EventBus.$on('shipping-view', res => { // 监听新增完毕
      // 更新列表数组
      if (res!=null) {
        for (var i = 0; i < _this.shippingForm.length; i++) {
          if (_this.shippingForm[i].id == res.id) {
            this.$set(this.shippingForm, i, res)
          }
        }
      } else {
        _this.loadOrder()
      }

      _this.refreshHit();
    })
  },
  mounted() {

    this.comeIn()
    this.beforeMount()

  },

  computed: {
    ...mapGetters([
      'scopeType'
    ])
  },

  methods: {
     refreshHit() {
       this.countfahuo()
       this.countpeisong()
       this.counthexiao()

     },
     writeoff(){
         if (this.deliveryForm==null) {
             return;
         }
           var _this=this
            let params = new URLSearchParams()

        params.append('status', 3)
        params.append('employeeId', _this.completeEmployeeId)
        params.append('memberId', _this.completeMemberId)
        params.append('startDate', _this.completeStartDate)
        params.append('endDate', _this.completeEndDate)
        params.append('productId', _this.completeProductId)
      completeBatch(params).then(res=>{

      if(res.type=='success'){
         this.$message('核销成功');
      }else{
         this.$message.error('核销失败');
      }
      })


     },
    delivery(val){
     if(utils.isNull(val)){
       return '0.00'
     }else{
       return val.toFixed(2)
     }
   },

    totalOrder(){
      console.log(this.pagenum);
      if(this.pagenum==6){
        this.returnsloadOrder()
      }else{
        this.loadOrder()
      }

    },
    detailsClickone(data) {
      this.$router.push({
        path: '/returns/view', query: {id: data}
      })
    },
    returnsloadOrder() {
      var _this = this;
      if(utils.isNull(this.keyword.date)){
        this.keyword.date = []
      }
      let params = new URLSearchParams();
      params.append('pageNum', _this.pageNum);
      params.append('pageSize', _this.pageSize);
      params.append('sn', _this.keyword.sn);
      params.append('memberId',_this.keyword.memberId)
      params.append('supplierId',_this.keyword.supplierId)
      params.append('employeeId', _this.song)
      params.append('mchId',this.query.sysMchId)
      params.append('shippingStatus',_this.shippingStatus)
      params.append('startDate', this.keyword.date.length > 0 ? this.keyword.date[0] : '');
      params.append('endDate', this.keyword.date.length > 0 ? this.keyword.date[1] : '');
      params.append('shippingMethod',2)
      returnlist(params).then(response => {
        console.log(response)
        _this.returnsForm = response.data.data
        _this.total = response.data.total
      }).catch(error => {
        console.log('error!!')
      });
    },
//小圆点
    countfahuo(){
      var _this=this
      if (utils.isNull(this.keyword.date)){
        this.keyword.date = []
      }
      let params = new URLSearchParams()
      params.append('pageNum', _this.pageNum)
      params.append('pageSize', _this.pageSize)
      params.append('memberId', _this.keyword.memberId)
      params.append('startDate', this.keyword.date.length > 0 ? this.keyword.date[0] : '')
      params.append('endDate', this.keyword.date.length > 0 ? this.keyword.date[1] : '')
      params.append('shopId', _this.keyword.shopId)
      params.append('productId', _this.keyword.productId)
      params.append('shippingStatus',1)
      params.append('shippingMethod',2)
      count(params).then(res=>{
          this.Tobeshipped = res.data
      })
    },

    countpeisong(){
      var _this=this
      if (utils.isNull(this.keyword.date)){
        this.keyword.date = []
      }
      let params = new URLSearchParams()
      params.append('pageNum', _this.pageNum)
      params.append('pageSize', _this.pageSize)
      params.append('memberId', _this.keyword.memberId)
      params.append('startDate', this.keyword.date.length > 0 ? this.keyword.date[0] : '')
      params.append('endDate', this.keyword.date.length > 0 ? this.keyword.date[1] : '')
      params.append('shopId', _this.keyword.shopId)
      params.append('productId', _this.keyword.productId)
      params.append('shippingStatus',2)
      params.append('shippingMethod',2)
      count(params).then(res=>{
        this.Tobedelivered = res.data
      })
    },

    counthexiao(){
      var _this=this
      if (utils.isNull(this.keyword.date)){
        this.keyword.date = []
      }
      let params = new URLSearchParams()
      params.append('pageNum', _this.pageNum)
      params.append('pageSize', _this.pageSize)
      params.append('memberId', _this.keyword.memberId)
      params.append('startDate', this.keyword.date.length > 0 ? this.keyword.date[0] : '')
      params.append('endDate', this.keyword.date.length > 0 ? this.keyword.date[1] : '')
      params.append('shopId', _this.keyword.shopId)
      params.append('productId', _this.keyword.productId)
      params.append('shippingStatus', 3)
      params.append('shippingMethod',2)
      count(params).then(res=>{
        this.Tobeshippedhexiao = res.data
      })
    },

    handlechooseClick(command){
      console.log('33333333');
      if(command=='chooseClick'){
        console.log('33333333');
        this.chooseClick()
      }

    },
    deliveryaaa(val){
       this.song=val
    },
    obtainshippingList(){

       var  _this=this

        let params = new URLSearchParams()
        params.append('status', 3)
        params.append('employeeId', _this.song)
        params.append('memberId', _this.keyword.memberId)
        params.append('startDate', this.keyword.date.length > 0 ? this.keyword.date[0] : '')
        params.append('endDate', this.keyword.date.length > 0 ? this.keyword.date[1] : '')
        params.append('productId', _this.keyword.productId)
        params.append('shopId', _this.keyword.shopId)
        params.append('shippingMethod',2)

      _this.completeEmployeeId = _this.song;
      _this.completeMemberId = _this.keyword.memberId;
      _this.completeStartDate = this.keyword.date.length > 0 ? this.keyword.date[0] : '';
      _this.completeEndDate = this.keyword.date.length > 0 ? this.keyword.date[1] : '';
      _this.completeProductId = _this.keyword.productId;

        summary(params).then(res=>{
          console.log(res);
          this.deliveryForm=res.data[0]
        })

    },

    queryShopClick(data){
      console.log(data)
      this.query.shopId = data.shopId
    },

    memberDouble(data) {
      this.memberName = data.name
      this.query.memberId = data.id
      this.memberTableVisible = false
    },
    memberTableClose() {
      this.memberTableVisible = false
    },
    doubleSupplier(data) {
      this.supplierName = data.name
      this.query.supplierId = data.id
      this.supplierVisible = false
    },
    supplierClose() {
      this.supplierVisible = false
    },
    addProductClick(data) {
      if (data.length > 1) {
        this.productName = data[0].name
        this.query.productId = data[0].id
        this.orderVisible = false
        this.$message({
          message: '只能查询一个商品',
          offset: 120,
          center: true
        })
      } else {
        this.productName = data[0].name
        this.query.productId = data[0].id
      }
    },
    doubleClick(val) {
      this.productName = val.name
      this.query.productId = val.id
      this.orderVisible = false
    },
    orderClose() {
      this.orderVisible = false

    },
    toSearchMember() {
      this.times = new Date().getSeconds()
      this.memberTableVisible = true
    },
    selectMember(data) {
      if (!utils.isNull(data)){
        this.memberName = data.name
        this.query.memberId = data.id
      }else {
        this.query.memberId = ''
      }

    },
    toAddProduct() {
      this.orderVisible = true
    },
    changeProduct(data) {
      if (!utils.isNull(data)){
        this.productName = data.name
        this.query.productId = data.id
      }else {
        this.query.productId = ''
      }

    },
    toSearchSupplier() {
      this.times = new Date().getSeconds()
      this.supplierVisible = true
    },
    changeSupp(val) {
      if (!utils.isNull(val)){
        this.supplierName = val.name
        this.query.supplierId = val.id
      }else {
        this.query.supplierId =''
      }

    },
    sendClick() {
      this.$router.push({
        path: '/shipping/batchShipping'
      })
    },
    importClick() {
      this.$router.push({
        path: '/shipping/import'
      })
    },
    queryMember(query) {
      this.getMemberList(query)
    },
    getMemberList(query) {
      let param = new URLSearchParams()
      param.append('keyword', query)
      memberList(param).then(res => {
        this.members = res.data.data
      })
    },

    queryEmployee(query) {
      this.getEmployeeList(query)
    },
    getEmployeeList(query) {
      let param = new URLSearchParams()
      param.append('name', query)
      emoloyeeList(param).then(res => {
        console.log(res)
        console.log('送货员')
        this.emoloyee = res.data.data
      })
    },

    remoteMethod(query) {
      this.loadSupplier(query)
    },
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          if (_this.queryType == true) {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            this.curHeight = h - 311//减去页面上固定高度height
            this.tabsHeight = h - 381
          } else {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 224//减去页面上固定高度height
            this.tabsHeight = h - 294
          }
        })()
      }
    },
    comeIn() {
      console.log('222')
      var h = document.documentElement.clientHeight || document.body.clientHeight
      this.curHeight = h - 224//减去页面上固定高度height
      this.tabsHeight = h - 294
    },
    loadOrder() {
      var _this = this
      if (utils.isNull(this.keyword.date)){
        this.keyword.date = []
      }
      let params = new URLSearchParams()
      params.append('pageNum', _this.pageNum)
      params.append('pageSize', _this.pageSize)
      params.append('sn', _this.keyword.sn)
      params.append('supplierId', _this.keyword.supplierId)
      params.append('employeeId', _this.song)
      params.append('memberId', _this.keyword.memberId)
      params.append('shippingEmployeeId', _this.keyword.emoloyeeId)
      params.append('startDate', this.keyword.date.length > 0 ? this.keyword.date[0] : '')
      params.append('endDate', this.keyword.date.length > 0 ? this.keyword.date[1] : '')
      params.append('orderSn', _this.keyword.orderSn)
      params.append('phone', _this.keyword.phone)
      params.append('productId', _this.keyword.productId)
      params.append('shippingStatus', _this.shippingStatus)
      params.append('keyword', _this.allKeyword)
      params.append('shippingMethod',2)
      list(params).then(response => {
        console.log(response)
        _this.shippingForm = response.data.data
        _this.total = response.data.total
      }).catch(error => {
        console.log('error!!')
      })
    },
    chooseClick() {
      this.queryType = !this.queryType
      if (this.queryType == true) {
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 265//减去页面上固定高度height
        this.tabsHeight = h - 334
      } else {
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 224//减去页面上固定高度height
        this.tabsHeight = h - 294
      }
    },
    queryProduct(query) { // 查询商品
      this.productOptions = []
      productList({ name: query }).then(res => {
        res.data.data.forEach((option, index) => {

          this.$set(this.productOptions, index, option)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    getProductList() { // 加载商品
      productList().then(res => {
        res.data.data.forEach((option, index) => {

          this.$set(this.productOptions, index, option)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    loadSupplier(query) {
      let params = new URLSearchParams()
      params.append('name', query)
      supplierList(params).then(res => {
        this.suppliers = res.data.data
      })
    },
    queryClick() {
      this.keyword = this.query
      this.pageNum = 1
      this.loadOrder()
      this.obtainshippingList()
    },
    resetClick() {
      this.query.date = []
      this.query.sn = ''
      this.query.supplierId = ''
      this.productName = ''
      this.memberName = ''
      this.supplierName = ''
      this.query.memberId = ''
      this.query.emoloyeeId = ''
      this.pageNum = 1
      this.query.orderSn = ''
      this.query.phone = ''
      this.query.productId = ''
      this.keyword = this.query
      this.loadOrder()
    },
    detailsClick(data) {
      this.$router.push({
        path: '/shipping/view', query: { id: data }
      })
    },
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1
      if (isLt1M) {
        return true
      }
      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ results, header, firstSheetName }) {
      console.log(results)
      console.log(header)
      console.log(firstSheetName)
      this.daoruData = results
      this.firstSheetName = firstSheetName
      this.daoruType = true
    },
    daoruClick() {
      this.$refs.upload.handleUpload()
    },
    //调用数据导出的函数
    handleExport(PageParam) {
      var _this = this
      //要导出函数携带的参数
      let data = {}
      data.tHeader = ['地址', '收货人', '客户名称', '商品名称', '联系电话', '商品编号', '货号/条码', '数量', '送货单号', '规格', '运单号', '单位']
      data.filterVal = ['address', 'consignee', 'memberName', 'name', 'phone', 'productId', 'productSn', 'quantity', 'sn', 'spec', 'trackingNo', 'unit']
      data.filename = '送货列表'
      let params = new URLSearchParams()
      params.append('shippingMethod',2)
      params.append('shippingStatus', _this.shippingStatus)
      exportList(params).then(response => {
        let list = response.data.data
        data.list = tcList
        _this.$refs.exportList2Excel.handleDownload(data)
        _this.total = response.data.total
      }).catch(error => {
        _this.$refs.exportList2Excel.unlockLoading()
        console.log('error!!')
      })
    },
    daoruClose() {
      this.daoruType = false
    },
    batchShippingClick() {
      var _this = this
      var shippings = []
      _this.daoruData.forEach(function(item) {
        var batchData = {
          productId: item.商品编号,
          sn: item.送货单号,
          trackingNo: item.运单号
        }
        shippings.push(batchData)
      })
      console.log(shippings)
      batchShipping(shippings).then(response => {
        console.log(response)

      }).catch(error => {

      })
    },
    tabsClick(data) {
      var _this = this
      this.pagenum=data.paneName

      switch (data.paneName) {
        case '0':
          _this.shippingStatus = ''
          this.loadOrder() // 配送状态
          break
        case '1':
          console.log(data.paneName)
          _this.shippingStatus = 1 // 配送状态
          this.loadOrder()
          break
        case '2':
          _this.shippingStatus = 2 // 配送状态
          this.loadOrder()
          break
        case '3':

          _this.shippingStatus = 3 // 配送状态
          this.loadOrder()

          break
        case '4':
          _this.shippingStatus = 4 // 配送状态
          this.loadOrder()
          break
        case '5':
          _this.shippingStatus = 5 // 配送状态
          this.loadOrder()
          break
        case '6':
          _this.shippingStatus = '' // 配送状态
          this.returnsloadOrder()
          break
      }


    },
    handleCommand(data) {
      console.log(data)
      var _this = this
      if (data == 'import') {
        this.importClick()
      } else if (data == 'shipped') {
        this.sendClick()
      }
    },
  }
}
</script>

<style scoped>

.app{
  height: 80px;
  width: 100%;
  display: flex;
  /* justify-content: space-around; */
  background-color: rgb(233 ,235,236);
}
.deliveryboy{
  height: 100%;
  width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: rgb(245,247,250) 1px solid;
}
.content{
  height: 100%;
  width: 700px;
  display: flex;
  justify-content: space-around;

}
.content_one{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* .content_one span{
  margin-right: 10px;
  display: inline-block;
  width: 150px;
}
.content_two span{
  margin-right: 10px;
  display: inline-block;
  width: 150px;
} */
.summary{
   height: 100%;
   paddding-top:40px;
   paddding-left:40px;
   display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 20px;
    border-left: rgb(245,247,250) 1px solid;
  /* border-left-style: solid;
  border-left-color: white; */
}
/deep/.el-tab-pane{
  position: relative;
}
.details_card {
  overflow: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
}

.details_card:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.elOption {
  background-color: #909399;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 40px
}

.el-input__inner {
  width: 100% !important;
}

.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/ .el-header {
  padding: 10px;
  /* height: 100% !important; */
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
  flex-direction: column;
}

.report_header_left {
  width: 5px;
  height: 46px;
  background-color: #409EFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.report_header_query {
  margin-left: 10px;
  width: 180px;
  margin-top: 5px;
}

.report_header_date {
  margin-left: 10px;
  width: 250px;
  margin-top: 5px;
}
.span-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;}
.btn-bell-badge {
  width: 26px;
  height: 18px;
  margin-left:5px;
  line-height:18px;
  border-radius:15px;
  background:#ed4014;}
.num {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #fff;
}
</style>
